<template>
  <div
    v-if="statsConfigs"
    class="app-container"
  >
    <page-header
      title="对账统计"
      desc="商城统计最新情报及相关设置"
    >
      <div class="d-flex justify-content-between">
        <el-date-picker
          ref="customPicker"
          v-model="month"
          type="month"
          align="right"
          placeholder="可选择对账月份"
          size="small"
        />
        <download-button
          text="下载对账单"
          url="/finance/order/download"
          :params="queryParams"
          class="ml-3"
        />
      </div>
    </page-header>
    <el-card shadow="never">
      <div
        slot="header"
        class="d-flex align-items-center justify-content-between"
      >
        <h5 class="m-0">
          <span>统计报告</span>
          <small
            v-if="dateRangeText"
            class="ml-2 text-muted"
          >{{ dateRangeText }}</small>
        </h5>
      </div>
      <em-cell-group
        v-for="(group,index) in statsConfigs.options"
        :key="index"
        layout="grid"
        grid-column="5"
        gutter="10px"
        :title="group.title"
      >
        <em-cell
          v-for="(item,sindex) in group.children"
          :key="sindex"
          :title="item.title"
          :label="item.description"
          center
          flex-fill="value"
        >
          <h3 class="m-0 text-success">
            <em-currency
              v-if="item.format==='currency'"
              :value="basicsData[item.name] || item.value"
              symbol=""
              deciaml-strictly
            />
            <span
              v-else
              class="text-muted"
            >{{ basicsData[item.name] || item.value }}</span>
          </h3>
        </em-cell>
      </em-cell-group>
    </el-card>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import DownloadButton from '@/components/Download'
import GridApiService from '@/api/grid'
export default {
  name: 'Brand',
  components: {
    PageHeader,
    DownloadButton
  },
  data() {
    return {
      apiService: new GridApiService('/finance/order'),
      gridConfig: null,
      loaded: false,
      statsConfigs: null,
      month: new Date(),
      timeRanges: [],
      basicsData: {},
      sourceData: null,
      downloading: false
    }
  },
  computed: {
    queryParams() {
      var params = {}
      if (this.dateRange) {
        params['datetime'] = this.dateRange
      }
      return params
    },
    dateRange() {
      console.log(this.month)

      var month = this.$moment(this.month || new Date())
      return [month.startOf('month').toDate(), month.endOf('month').toDate()]
    },
    dateRangeText() {
      var dateRange = this.dateRange.map(date => {
        return this.$moment(date)
          .locale('zh-CN')
          .format('LL')
      })
      return dateRange.join('至')
    }
  },
  watch: {
    queryParams() {
      this.onLoadStats()
    }
  },
  created() {},
  mounted() {
    this.onLoad()
    this.loadGridModel()
  },
  methods: {
    onLoad() {
      var apiService = new GridApiService('/finance/default')
      apiService.options().then(response => {
        const { data } = response
        this.statsConfigs = data
        this.onLoadStats()
      })
    },
    loadGridModel() {
      this.apiService.config().then(response => {
        const { data } = response
        this.gridConfig = data.config
        this.loaded = true
      })
    },
    onLoadStats() {
      this.$http.finance.default(this.queryParams).then(res => {
        const { basics, sourceData } = res.data
        this.basicsData = basics
        this.sourceData = sourceData
      })
    }
  }
}
</script>
<style lang="scss">
.el-month-table td.today .cell {
  color: #606266;
}
.el-month-table td.today.current .cell {
  color: #1890ff;
}
</style>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
//修改控件自带的css
.custom-datepicker {
  position: relative !important;
  ::v-deep .el-date-editor {
    position: absolute; //绝对定位
    top: 0;
    right: 0;
    opacity: 0; //设置完全透明
    width: 100%;
    height: 100%;
    > .el-input__inner {
      cursor: pointer;
    }
  }
}
</style>
